<template>
  <el-container>
    <el-header style="height: auto;"> 
        <el-row :gutter="10">
            <el-col :xs="4" :sm="4" :md="4" :lg="3" :xl="2">
                <div class="">
                    <i>
                        <svg class="Logoicon" aria-hidden="true">
                            <use xlink:href="#iconzhi"></use>
                        </svg>
                    </i>
                    <span class="logo">
                        知聊
                    </span>
                </div>
            </el-col>
            <el-col :xs="4" :sm="4" :md="8" :lg="8" :xl="9">
                <div class="bg-purple-light">
                  <el-menu :default-active="activeIndex" class="" mode="horizontal" :router="true">
                    <!-- 推荐内容 -->
                    <!-- <el-menu-item index="/index">首页</el-menu-item> -->
                    <el-menu-item index="/clubInt">社团简介</el-menu-item>
                    <el-menu-item index="/clubDyn">社团动态</el-menu-item>
                    <el-menu-item index="/myDyn">我的动态</el-menu-item>
                  </el-menu>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="8">
                <div class=" bg-purple-dark">
                    <el-input placeholder="请输入内容" v-model="searchKeyWords" clearable>
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="search()"></i>
                </el-input>
                </div>
            </el-col>
            <el-col :xs="8" :sm="8" :md="4" :lg="7" :xl="5">
                <div class="bg-purple-my">
                    <!-- 私信 -->
                    <el-popover placement="bottom-start" width="300px" trigger="click">
                        <el-table :data="gridData">
                            <el-table-column width="300px" property="date" label="我的私信"></el-table-column>
                        </el-table>
                        <el-button slot="reference" class="news" icon="el-icon-chat-line-round">
                        </el-button>
                    </el-popover>
                    <!-- 头像 -->
                    <el-popover placement="bottom-start" width="150px" trigger="click">
                        <ul class="person" :router="true">
                            <!-- <li>我的主页</li> -->
                            <li><router-link to="/myHomePage" exact>我的主页</router-link></li>
                            <li><router-link to="/editor" exact>创作中心</router-link></li>
                            <li><a href="#" @click="logout()">退出</a>
                              </li>
                        </ul>
                    <el-avatar  slot="reference"  class="avatar" :src=this.avatorUrl></el-avatar>
                    </el-popover>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <!-- 中心部分 -->
    <el-main>
      <router-view/>    
    </el-main>
  </el-container>
</template>


<script>
export default {
    data () {
        return {
            searchKeyWords:'',
            activeIndex:'/clubInt',
            avatorUrl:'',
        }
    },
    created(){
      this.avatorUrl=window.sessionStorage.getItem("avatorUrl");
    },
    methods:{
      logout(){
        window.sessionStorage.clear();
        this.$router.push({path:"/login"});
      },
      search(){
        this.$router.push({path:"/searchResult"})
      }
    },

};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
}
// 页头部分
.el-header {
  background-color: #fdfdfd;
  width: 100%;
  top: 0rem;
  position: sticky;
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  align-items: center;
  text-align: center;
  box-shadow: 1em 0.1em #e4e4e4; 
  z-index: 10;
  >div{
      cursor: pointer;
  }
  .logo{
      font-family:'Courier New', Courier, monospace;
      font-size: 2rem;
      color: rgb(24, 153, 240);
      font-weight: 700;
  }
  .el-input {
    width: 80%;
    border-radius: 50%;
  }
  
.avatar{
    margin-left: 1rem;
  }
}
// 头像部分
.person{
  >li {
        font-size: 16px;
        text-align: center;
        margin-bottom: 1rem;
        cursor: pointer;
    }
    :last-child{
      margin-bottom: 0;
    }
}
// head暂用
.el-row{
  width: 100%;
}
  .el-col {
    height: 100%;
  }
  .bg-purple-dark {
      margin-top: 0.6rem;
  }
  .bg-purple-my{
    position: relative;
     height: 100%; 
    .el-button{
      position: absolute;
      transform: translateX(-50%) translateY(25%);
    }
    .el-avatar{
      position: absolute;
      transform: translateX(100%) translateY(25%);
    }
  }
    // 主体部分
    .el-main {
      background-color: #e9eef3;
      // background-color: chocolate;
      color: #333;
      display: flex;
      padding: 0%;
      flex-direction: column;
      font-size: 16px;
      align-items: center;
    }
</style>